<template>
    <div class="origin_box">
     <div class="author_msg">
        <img src="../../assets/images/yy.jpg" alt="">
    </div>
        <div class="title">心晴日记分享论坛</div>
   
        <el-button-group>
            <el-button type="success" size="mini" @click="index()"  icon="el-icon-s-home" round>首页</el-button>
            <el-button type="success" size="mini" @click="share()" icon="el-icon-edit" round>分享</el-button> 
            <el-button type="success" size="mini" @click="openCollect()" icon="el-icon-star-off" round>收藏</el-button>
            <el-button type="success" size="mini" @click="openMyArticle()" icon="el-icon-s-custom" round>我的</el-button>
        </el-button-group>
        
        <div class="line"></div>
        <!--论坛区域-->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span class="article_title">标村上春树v反对题</span>
                <br>
                <span class="author">{{article_form.time}} 来自{{article_form.author}}的分享</span>
            </div>
          <!--内容-->
            <div class="text item" style="text-indent:2em;margin-bottom:10px;margin-top:-5px">
                {{article_form.arr}}
                <br>
            </div>
            
            <div style="margin-top:2px;color:silver">置顶评论</div>
            
          <!--评论区-->
            <div class="text item" style="margin-bottom:10px;margin-top:px">
            <div class="linetalk2"></div>
                {{talk.content}}
                <br>
                <div style="font-size:10px;margin:0 5% 0 49%">---{{talk.time}}</div>
                <div style="font-size:12px;margin:0 5% 0 65%">来自{{talk.author}}</div>
            </div>

            <!--手风琴展开区域-->
            <el-collapse accordion>
                <el-collapse-item>
                    <template slot="title">
                        <el-button icon="el-icon-caret-bottom" style="display:inline-block;" type="text">展开阅读</el-button>
                    </template>
                    <div>{{article_form.content}}</div>
                    <div class="demo-image__placeholder">
                        <div class="block">
                            <span class="demonstration">默认</span>
                            <el-image :src="src"></el-image>
                        </div>
                    </div>
                    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                    <!--展开评论区-->
                     <div style="margin-top:2px;color:silver">评论区</div>
                    <!--评论区-->
                        <div class="text item" style="margin-bottom:10px;margin-top:px">
                        <div class="linetalk2"></div>
                            {{talk.content}}
                            <br>
                            <div style="font-size:10px;margin:0 5% 0 49%">---{{talk.time}}</div>
                            <div style="font-size:12px;margin:0 5% 0 65%">来自{{talk.author}}</div>
                        </div>
                        <div class="text item" style="margin-bottom:10px;margin-top:px">
                        <div class="linetalk2"></div>
                            {{talk.content}}
                            <br>
                            <div style="font-size:10px;margin:0 5% 0 49%">---{{talk.time}}</div>
                            <div style="font-size:12px;margin:0 5% 0 65%">来自{{talk.author}}</div>
                        </div>
                </el-collapse-item>
            </el-collapse>
            <el-button icon="el-icon-view" @click="read()" style="float: right; padding: 10px 10px" type="text">浏览量({{article_form.visit_count}})</el-button>
            <el-button icon="el-icon-star-off" @click="collect()" style="float: right; padding: 10px 10px" type="text">收藏({{article_form.collect_count}})</el-button>
            <el-button icon="el-icon-s-comment" @click="talk__()" style="float: right; padding: 10px 10px" type="text">评论({{article_form.talk_count}})</el-button>
        </el-card>
        <div class="line"></div>

        <!-----------------------------------添加分享卡片---------------------------------------->
        <el-dialog
            title="今日宜分享好心情" :visible.sync="addDialogVisible" width="90%" center>
            <!--输入文章内容-->
            <el-input v-model="article_form.content"  type="textarea" :rows="6" placeholder="在此写下你的心情吧！"></el-input>
            <!--上传图片-->
            <div class="selectImage">选择一张图片上传？</div>
            <el-upload style="margin-top:0px" class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" list-type="picture"
                :limit="3" :on-exceed="handleExceed" :file-list="fileList">
                <el-button size="small" type="text">选择图片</el-button> 
            </el-upload>

            <!--文章权限-->
            <el-switch
                v-model="permission" active-text="所有人可见？" inactive-text="仅自己可见"
                @change="changePermission()">
            </el-switch>
            <!--底部区域-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit()">发 表</el-button>
            </span>
        </el-dialog>
        <!-------------------------------------------------------------------------------------->

          <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="article_title">标村上春树v反对题</span>
          </div>
          <div class="text item" style="margin-bottom:10px;margin-top:-5px">
            列表内容
            <br>
            列表内容
          </div>
            <!--手风琴展开区域-->
            <el-collapse accordion>
                <el-collapse-item>
                    <template slot="title">
                        <el-button icon="el-icon-caret-bottom" style="display:inline-block;" type="text">展开阅读</el-button>
                    </template>
                    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
                    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                </el-collapse-item>
            </el-collapse>
            <el-button icon="el-icon-star-off" style="float: right; padding: 10px 10px" type="text">收藏</el-button>
            <el-button icon="el-icon-s-comment" style="float: right; padding: 10px 10px" type="text">评论</el-button>
        </el-card>
        <div class="line"></div>

    <!--评论区-->
    <el-dialog
        title="评论区" :visible.sync="talkDialogVisible" width="90%" center>
        <!--输入文章内容-->
        <el-input v-model="talk.content"  type="textarea" :rows="3" placeholder="我来说两句！"></el-input>
        <!--底部区域-->
        <span slot="footer" class="dialog-footer">
            <el-button @click="talkDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="talkSubmit()">发 表</el-button>
        </span>
    </el-dialog>    
        
    </div>
</template>

<script>
// import bus from './bus'
export default {
    data() {
        return {
            //文本内容
            article_form:{
                //标题
                title:'',
                //内容
                content:'',
                //图片
                pic:'',
                //时间
                time:'2021-11-03',
                //作者
                author:'Zhangsan',
                //评论数量
                talk_count:0,
                //收藏
                collect_count:0,
                //浏览人数
                visit_count:2,
                arr:'',
                //传给后端的权限
                purview:'',
            },
            //图片url
            src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            //打开添加文章dialog
            addDialogVisible:false,
            //文件列表
            fileList: [{name: 'food.jpeg', 
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            }],
            //打开评论框
            talkDialogVisible:false,
            //评论区
            talk:{
                content:'',
                author:'Chaoyxy',
                time:'2021-11-5 12:05:55'
            },
            userId:'',
            UI:'',
            message:'',
            //权限开关
            permission:false,
        }
    },
    methods:{
        //首页
        index(){
            console.log("首页")
            // console.log("来自login.vue:"+this.userId)
            // var uid = localStorage.getItem(this.userId)
            console.log("存储的id为："+this.userId)
        },
        //分享
        share(){
            console.log("分享")
            //打开对话框，添加东西
            this.addDialogVisible = true
            //获取时间戳，赋值
            this.article_form.time = this.getTime()
            console.log(this.article_form.time)
        },
        //打开收藏
        openCollect(){
            console.log("打开收藏")
        },
        //评论
        talk__(){
            //评论区查询到所有人的评论
            console.log("进入评论区！")
            this.talkDialogVisible = true
        },
        //收藏
        collect(){
            console.log("收藏")
        },
        //浏览量
        read(){
            this.$message("当前浏览人数为:"+this.article_form.visit_count)
        },
        //我的
        openMyArticle(){
            console.log("我的")
        },
        //获取时间戳
        getdate(){
            let date = new Date()
            let time = date.getTime()
            return time
        },
        //上传图片操作
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            console.log(fileList)
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        //发表文章
        async submit(){
            //关闭对话框
            this.addDialogVisible = false
            //给内容赋值
            //截取前30个字符
            this.article_form.arr = this.article_form.content.substr(0,150)
            //给文章发表的时间赋值
            // this.article_form.time = this.getdate()
            // 网络请求，给后端传送数据
            const res = await this.$http.get('/article',
            {params:{
                title:this.article_form.title,
                //内容
                content:this.article_form.content,
                //图片
                pic:'aaa',
                //作者
                author:'Zhangsan',
                //评论数量
                talk_count:2,
                //时间
                // time:this.article_form.time,
                //收藏
                collect_count:0,
                //浏览人数
                visit_count:2,
                //权限
                purview:this.article_form.purview,
                //userID
                userId:this.article_form.userId
            }})
            
            console.log(res)
            //弹出提示
            this.$message.success("发表成功")
            console.log("来自兄弟组件的userId:"+this.userId)
            console.log(this.article_form.userId)
            
        },
        //监听permission的值
        changePermission(){
            console.log(this.permission)
            if(this.permission){
                this.article_form.purview = '1'
            }else{
                this.article_form.purview = '0'
            }
            console.log(this.article_form.purview)  
        },
        //发表评论
        talkSubmit(){
            this.talkDialogVisible = false
            this.talk.time = this.getTime()
            console.log(this.userId)
            console.log("获取的时间戳为："+this.article_form.time)
        },
        //转换为日期格式
        formatDate(now) { 
            var year=now.getFullYear(); 
            var month=now.getMonth()+1; 
            if(month<10){
                month = '0'+month
            }
            var date=now.getDate(); 
             if(date<10){
                date = '0'+date
            }
            var hour=now.getHours(); 
             if(hour<10){
                hour = '0'+hour
            }
            var minute=now.getMinutes(); 
             if(minute<10){
                minute = '0'+minute
            }
            var second=now.getSeconds(); 
             if(second<10){
                second = '0'+second
            }
            return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
        },
        //获取当地时间
        getTime(){
            let date = new Date()
            let time = date.getTime()
            // console.log(time)
            let nowTime = this.formatDate(new Date(time))
            console.log(nowTime)
            return nowTime
        }
    },
    created(){
        //把登录成功存储的localStorage里面的userId拿出来，赋值给本组件的userId
        this.userId = localStorage.getItem('userId')
        this.article_form.userId = this.userId
    }
}
</script>

<style lang="less" scoped>
.article_title{
    font-weight: bold;
}
.el-button-group{
    position: relative;
    top: 15px;
    bottom: 15px;
    left: 17%;
}
.box-card{
    opacity: 0.9;
    position: relative;
    left: 10%;
    top:15px;
}
.title{
  position: relative;
  top:10%;
  left:29%;
  font-size: 25px;
}
.line{
    position: relative;
    display: inline-block;
    height: 2px;
    width: 100%;
    background-color: rgb(186, 188, 190);
    border-radius:1px ;
    top:10px;
    left: 10%;
}
hr{
    position: relative;
    border-radius:0.5px ;
    top:15px;
    left: 2%;
}
.hr{
    position: relative;
    left: -2px;
}
.author{
    float: right;
    font-size: 12px;
    color: rgb(186, 188, 190);
}
.selectImage{
    margin-top:20px;
}
.author_msg img{
    height: 80px;
    width: 80px;
    position: relative;
    top:1%;
    left: 49%;
    z-index: 200;
    border-radius: 50%;
    opacity: 1;
    background-image: url(../../assets/images/yy.jpg);
}
.linetalk1{
    height: 1px;
    background-color: silver;
    width: 55px;
}
.linetalk2{
    height: 1px;
    background-color: silver;
}
.el-switch{
    float: right;
    margin-top: 5px;
}
</style>